import React, {
  Component
} from 'react';
import {
  Text,
  ListView,
  RefreshControl,
  View,
  StyleSheet,
  Image,
  Button,
  Alert,
  InteractionManager,
  NativeModules,
  TouchableHighlight
} from 'react-native';

import styles from './styles'
import LmmImageView from '../../component/LmmImageView';

const OrderItem = ({order,orderType, orderCancleDialog, orderToSendDialog, showLogistics}) => {
    const goods = order.goods[0];

    let imgU = goods.img;

    const imageUri = {
      uri: imgU,
      width: 76,
      height: 76
    };

    const orderStateArgs = {
      "1": "已下单",
      "2": "已付款",
      "3": "已配送",
      "6": "已取消",
      "7": "已完成",
      "8": "已评价",
      "15": "取消中",
      "81": "退货",
      "82": "换货",
      "83": "已退货",
      "84": "已换货"
    }

    const orderState = orderStateArgs[order.state];

    let buttonView;

    if (orderState == "已付款") {
      buttonView = <View style={{flexDirection: 'row'}}>
            <TouchableHighlight underlayColor="white" onPress={orderCancleDialog(order.id)}>
                <View style = {styles.buttonRedStyle}><Text style={{color:"red"}}>取消订单</Text></View>
            </TouchableHighlight>
            <TouchableHighlight underlayColor="white" onPress={orderToSendDialog(order.id)}>
                <View style = {styles.buttonGreenStyle}><Text style={{color:"#0A9D35"}}>配送</Text></View>
            </TouchableHighlight>
        </View>
    } else if (orderState == "已配送" || orderState == "已完成") {
        buttonView = <View style={{flexDirection: 'row'}}>
            <TouchableHighlight underlayColor="white" onPress={showLogistics(order.id)}>
                <View style = {styles.buttonGreenStyle}><Text style={{color:"#0A9D35"}}>查看物流</Text></View>
            </TouchableHighlight>
        </View>
    }


    let goodDiv;
    let contactDiv;
    if (orderType != "10") {
      if (order.address == "到店取货") {
         contactDiv = <View style={styles.orderContent}>
            <Text style={styles.grayFont}>{order.address}</Text>
        </View>
      }else {
        contactDiv = <View style={styles.orderContent}>
            <Text style={styles.grayFont}>联系人:{order.user}</Text>
            <Text style={styles.grayFont}>联系方式:{order.phone}</Text>
            <Text style={styles.grayFont}>{order.address}</Text>
        </View>
      }

      goodDiv = <View style={styles.orderContent}>
            <Text style={styles.blackFont}>所购商品</Text>
            <View style={{flex: 1, flexDirection: 'row',marginTop:10}}>
                <LmmImageView
                    source={imageUri}
                    style={{width: 80, height: 100}}
                />
                <View style = {{flex: 1, flexDirection: 'column',marginLeft:10}}>
                    <Text style={styles.blackFont}>{goods.name}</Text>
                    <Text style={styles.grayFont}>{goods.attrValues}</Text>
                    <Text style={styles.grayFont}>数量：{goods.num}</Text>
                </View>
                <Text style={styles.grayFont}>{goods.price/100}元</Text>
            </View>
        </View>
    } else {
      contactDiv = <View style={styles.orderContent}>
            <Text style={styles.grayFont}>付款人:{order.userNick}</Text>
        </View>
      goodDiv = <View style={styles.orderContent}>
            <Text style={styles.blackFont}>扫码订单</Text>
        </View>
    }

    let bottomView ;

    if (orderType != "10") {
        bottomView = <View style={{ padding:10,
            flex: 1,
            borderBottomColor:"#eee",
            borderBottomWidth:1,
            flexDirection: 'row',
            alignItems:'center',
            justifyContent: 'space-between'}} >
                <Text style={styles.grayFont}>状态：{orderState}</Text>
                {buttonView}
            </View>
    }else{
        bottomView = <View style={{ padding:10,
            flex: 1,
            borderBottomColor:"#eee",
            borderBottomWidth:1,
            flexDirection: 'row',
            alignItems:'center',
            justifyContent: 'space-between'}} >
                <Text style={styles.grayFont}>状态：{orderState}</Text>
            </View>
    }

    return (
      <View style={{flex: 1, flexDirection: 'column'}}>
        <View style={{margin:10,flex: 1, flexDirection: 'row'}}>
            <View style={{ backgroundColor: '#0A9D35',width:3,marginRight:10}} />
            <Text style={styles.blackFont}>订单ID:{order.orderNo}</Text>
        </View>
        <View style={{ backgroundColor: '#eee',height:1}} />
        {contactDiv}
        <View style={{ backgroundColor: '#eee',height:1}} />
        <View style={{ margin:10,flex: 1,flexDirection: 'row',justifyContent: 'space-between'}} >
            <Text style={styles.grayFont}>{order.createdAt}</Text>
            <Text style={styles.greenFont}>订单金额：{order.price/100}元</Text>
        </View>
        <View style={{ backgroundColor: '#eee',height:1}} />
        {goodDiv}
        <View style={{ backgroundColor: '#eee',height:1}} />
        {bottomView}
      </View>
    );
}

export default OrderItem;